<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>请假类型</title>
</head>
<body>
<style type="text/css">
	.index-body1{
		padding: 20px;
    	background-color: #f3f3f3;
    	padding-bottom: 30px;
    	margin: 0 auto;
	}
	.index-body2{
		width: 100%;
	    height: 100%;
	    background-color: #fff;
	}
	.index-body3{
		min-width: 950px;
	    padding: 20px;
	    position: relative;
	}
	.title-left{
		display: inline-block;
	    float: left;
	    margin-right: 5px;
	    font-size: 12px;
	   	color: gray;
	}
	.title-left span{
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	}
	.title-right{
		float: right;
	}
	.title-right div{
		float: left;
		margin-right: 20px;
	}
	.title-right div input{
		background-color: inherit;
		height: 22px;
	    padding: 0 4px;
	    font-size: 14px;
    	text-align: center;
	    border-radius: 2px;
	    border: 1px solid #eee;
	}
	.title-right-btn{
		padding: 2px 8px 1px 8px;
    	font-size: 12px;
    	border-radius: 3px;
    	color: #666;
    	background-color: #fff;
    	border-color: #e5e6e7;
	}
	.datagrid-header-row td{
		background: #6666661a;
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	    text-align: center;
	}
	.datagrid-row td{
		background: #fff;
		font-size: 12px;
		text-align: center;
	}
	ul{
	list-style:none;
	}
	.top-se>li,.date-search{
	float:left;
	padding-right: 5px;
    padding-left: 5px;
	}
	.top-se span{
		font-size: 12px;
		color: gray;
	}
	.btn3{
		margin-right: 10px;
    	border-radius: 4px;
    	cursor: pointer;
    	background-color: #19AA8D!important;
    	color: #fff!important;
    	border-color: #13826b33!important;
    	border: 1px solid transparent;
	}
	
	.title-right-text{
		color:#666666e3;
		padding-left: 65px;
	    padding-right: 25px;
	    border-radius: 5px;
	    background-color: rgba(242,242,242,1);
	}
	.title-right-text input{
		width: 40px;
    	background-color: #fff;
    	display: inline-block;
	}
	
	.modal{
		overflow-x: hidden;
    	overflow-y: auto;
    	opacity: 1;
    	position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 1050;
	    outline: 0;
	    display: none;
	}
	.modal-dialog{
		transform: translate(0,0);
		width: 600px;
    	margin: 30px auto;
    	position: relative;
	}
	.modal-content{
		border: none;
    	border-radius: 4px;
    	box-shadow: 2px 2px 6px rgba(0,0,0,.349019607843137);
    	position: relative;
    	background-color: #fff;
    	background-clip: padding-box;
    	outline: 0;
    	font-size: 12px;
    	color: #999;
	}
	.modal-header{
		padding: 6px 15px;
		min-height: 16.42857143px;
		border-bottom: 1px solid #e5e5e5;
	}
	.modal-body{
		overflow-y: auto;
    	max-height: 401px;
    	padding: 8px 15px;
    	position: relative;
	}
	.modal-footer{
		padding: 5px 10px;
		text-align: right;
		height:30px;
    	border-top: 1px solid #e5e5e5;
	}
	.modal-footer button{
		padding: 2px 12px;
	    font-size: 12px;
	    border-radius: 3px;
	    border: 1px solid transparent;
	    margin-bottom: 0;
    	margin-left: 5px;
	}
	.btn-close{
		color: #666;
    	background-color: #fff;
    	border-color: #e5e6e7!important;
	}
	.btn-yes{
		color: #fff!important;
    	background-color: #19AA8D!important;
    	border-color: #19AA8D!important;
	}
	.close{
		padding: 0px;
	    opacity: 1;
	    transition: all linear .2s;
	    margin-top: -2px;
	    border: 0;
	    float: right;
	    font-size: 21px;
	    font-weight: 700;
	    line-height: 1;
	    color: #000;
	    text-shadow: 0 1px 0 #fff;
	}
	.modal-backdrop{
		position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 1040;
	    background-color: #000;
	    opacity: .5;
	    display: none;
	}
	h3{
	    font-size: 14px;
	    font-weight: 700;
	    font-style: normal;
	    margin: 0;
    	line-height: 1.42857143
	}
	.modal-form-group{
		margin: 0;
		margin-bottom: 10px;
		height:30px;
    	line-height: 1.42857143;
	}
	.form-group-text1,.form-group-text2{
		padding-right: 5px;
    	padding-left: 0;
    	float: left;
    	text-align: center;
	}
	.modal-form-group span{
		font-size: 14px;
		font-weight: 400;
	}
	.modal-form-group input{
		border-color: #99999929!important;
	    color: #999999cf;
	    padding-left: 10px;
	}
	.form-group-text1{
		width: 48%;
	}
	.form-group-text2{
		width: 75%;
	}
	#zhui{
		width:50px;
		height:20px;
		border-radius: 10px;
		position: relative;
		float: right;
	}
	.kai{
		background-color:#19AA8D!important;
		border-color:#19AA8D!important;
	}
	.guan{
		background-color:gainsboro;
		border-color:gainsboro;
	}
	#yuan{
		width:20px;
		height:20px;
		background-color:#ffffff;
		border-color:#ffffff;
		border-radius: 25px;
		position: absolute;
	}
	.one_kai{
		left:30px;
	}
	.one_guan{
		left:0px;
	}
	#LT_ZUI{
		width: 180px;
	}
</style>
<script type="text/javascript">
function xiugai(id,qi){
	$("#form").form('load','selectQingId?id='+id);
	if(qi==0){
		$("#zhui").removeClass("kai");
		$("#zhui").addClass("guan");
		$("#yuan").animate({ 
			left:'0px',
	  	}, 1 );
	}else if(qi==1){
		$("#zhui").removeClass("guan");
		$("#zhui").addClass("kai");
		$("#yuan").animate({ 
			left:'+30px',
	  	}, 1 );
	}
	kaiqi();
}
function delect(id){
	$("#form").form('load','delect_qing?id='+id);
	$("#content-admin").panel('open').panel('refresh','kq-leave-class');
}
$(function(){
	//初始化表格
	$('#table1').datagrid({
		url:'leaveclass_selectAll',
		columns:[[
   	 		{field:'LT_ID',hidden:true,align:'center'},
   	 		{field:'LT_QI',hidden:true},
   	 		{field:'sortable',title:'#',width:28,align:'center'},
			{field:'LT_NAME',title:'类型名称',width:200,align:'center'},
			{field:'qi',title:'是否启用',width:200,align:'center'},
			{field:'LT_DAN',title:'时间单位',width:200,align:'center'},
			{field:'LT_ZUI',title:'请假最小数',width:210,align:'center'},
			{field:'caozuo',title:'操作',width:150,align:'center',
				formatter: function(value,row,index){
					return "<button class='btn3' id='btn-xiu' onclick='xiugai("+row['LT_ID']+","+row['LT_QI']+")'>修改</button>";
				},
			}
   	 	]],
	    pagination:true,
	    pageNumber:1,
	    pageSize:5,
	    pageList:[5,10,15]
	});
	$(".close").click(function(){
		guanbi();
	});
	$(".btn-close").click(function(){
		guanbi();
	});
	$(".btn-yes").click(function(){
		$("#form").submit();
		$("#form").form("clear");
		guanbi();
		$("#content-admin").panel('open').panel('refresh','kq-leave-class');
	});
	$("#btn-add").click(function(){
		$("#yuan").removeClass("one_kai");
		$("#zhui").removeClass("kai");
		$("#zhui").addClass("guan");
		if($("#LT_QI").val()!=0){
			$("#yuan").animate({ 
				left:'0px',
		  	}, 1 );
		}
		qingkong();
		kaiqi();
	});
	$("#btn-xiu").click(function(){
		kaiqi();
	});
	$("#yuan").click(function(){
		if($("#LT_QI").val()==0){
			$("#zhui").removeClass("guan");
			$("#zhui").addClass("kai");
			$(this).animate({ 
				left:'+30px',
		  	}, 100 );
			$("#LT_QI").val("1");
		}else{
			$("#zhui").removeClass("kai");
			$("#zhui").addClass("guan");
			$(this).animate({ 
				left:'0px',
		  	}, 100 );
			$("#LT_QI").val("0")
		}
	});
	
});
function guanbi(){
	$(".modal").hide();
	$(".modal-backdrop").hide();
}
function kaiqi(){
	$(".modal").show();
	$(".modal-backdrop").show();
}
function qingkong(){
	$("#LT_NAME").val("");
	$("#LT_ZUI").numberbox('clear');
	$("#LT_QI").val("0")
}

</script>
<div class="index-body1">
	<div class="index-body2">
			<div class="index-body3">
				<div class="title">
					<div class="title-left"> 
						<button class="btn3" id="btn-add">新增请假类型</button>
					</div>
					
			</div>
				<div class="body-table">
					<table id="table1" class="easyui-datagrid" data-options="width:1023,fitColumns:true,height:300">

					</table>
				</div>
			</div>
			
		</div>
	</div>

<div class="modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close">×</button>
				<h3>新增请假类型</h3>
			</div>
			<div class="modal-body">
				<form action="add_qingjia" method="post" id="form">
					<div class="modal-form-group">
					<input type="hidden" id="LT_ID" name="LT_ID" >
						<div class="form-group-text2">
							<span>请假类型名：</span>
							<input type="text" id="LT_NAME" name="LT_NAME" placeholder="请假类型" >
						</div>
					</div >
					<div class="modal-form-group">
						<div class="form-group-text2">
							<span>最小时间：</span>
							<input type="text" id="LT_ZUI" name="LT_ZUI" class="easyui-numberbox" value="1"  data-options="min:0.5,precision:1" placeholder="最小时间">
						</div>
						
					</div>
					<div class="modal-form-group">
						<div class="form-group-text1">
							<span>时间单位：</span>
							<select name="LT_DAN">
								<option>天</option>
								<option>月</option>
							</select>
						</div>
						<div class="form-group-text1">
							<span>是否启动：</span>
							<div id="zhui">
							<div id="yuan"><input type="hidden"  id="LT_QI" name="LT_QI"  value="0"/></div>
							</div>
						</div>
					</div >
				</form>
			</div>
			<div class="modal-footer">
				<button class="btn-close">关闭</button>
				<button class="btn-yes">确定</button>
			</div>
		</div>
	</div>
</div>
<div class="modal-backdrop"></div>
</body>
</html>